<template>
  <div id="app">
    <!-- 搜索框 -->
    <div class="searchInput">
      <input
        type="text"
        v-model="searchValue"
        @keydown.enter="search"
        @blur="search"
      >
      <i
        class="iconfont icon-sousuo"
        @click="search"
      ></i>
    </div>
    <!-- 搜索结果展示列表 -->
    <div class="searchLists">
      <ol>
        <li
          v-for="(item,index) in searchLists"
          :key="item.id"
          @click="pushSong(item.id)"
        >
          <span class="name">{{index+1}}.{{item.name}}</span>
          <span> <span
              v-for="arti in item.artists"
              :key="arti.id"
            >{{arti.name}} </span></span>
        </li>
      </ol>

    </div>

    <!-- 底部播放器 -->
    <player ref="player"></player>
  </div>
</template>

<script>
import player from "./components/player.vue";
export default {
  name: "App",
  data() {
    return {
      searchValue: "周杰伦",
      searchLists: {},
      searchSong: {
        // 当前播放歌曲信息
        id: 1,
        name: "",
        artist: "",
        time: "",
        album: "",
        cover: "",
        songUrl: "",
      },
      // history: this.$refs.player.$data.history,
    };
  },
  mounted() {},
  methods: {
    search() {
      this.axios({
        url: `https://autumnfish.cn/search?keywords=${this.searchValue}`,
        methods: "get",
      }).then((res) => {
        // console.log(res);
        this.searchLists = res.data.result.songs;
      });
    },
    pushSong(value) {
      this.axios({
        url: `https://autumnfish.cn/song/url?id=${value}`,
        method: "get",
      }).then((res) => {
        // console.log(res);
        this.searchSong.songUrl = res.data.data[0].url;
      });
      this.axios({
        url: "https://api.imjad.cn/cloudmusic",
        method: "get",
        params: {
          type: "detail",
          id: value,
        },
      })
        .then((res) => {
          let item = res.data.songs[0];
          this.searchSong.cover = item.al.picUrl;
          this.searchSong.name = item.name;
          this.searchSong.id = item.id;
          this.searchSong.time = item.m.size;
          this.searchSong.artist = item.ar[0].name;
          this.searchSong.album = item.alia[0];
        })

        // 这里曾出现同步问题，是当前歌曲先存进会话存储还是先调用updateSong方法
        // 应该逻辑也有点问题
        // 反正解决了点击搜索结果，第一次添加的是空的数据，后面点击添加到播放列表是上一次点击的数据
        .then(() => {
          sessionStorage.setItem("Song", JSON.stringify(this.searchSong));
        })
        .then(() => {
          this.$store.commit("updateSong", this.searchSong);
        });

      let _this = this;
      setTimeout(() => {
        _this.$refs.player.$data.playing = true;
        _this.$refs.player.play();
      }, 200);
      // 判断子组件歌曲列表中是否已经存在该歌曲，已存在就不添加
    },
  },

  components: {
    player,
  },
};
</script>

<style lang="scss">
body {
  margin: 0px;
  padding: 0px;
}
// @import "//at.alicdn.com/t/font_1924638_0oo76o9mkb1.css";
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  padding-top: 60px;
  height: 90vh;
  background-color: rgb(75, 186, 221);
  .searchInput {
    position: relative;
    width: 50vw;
    margin: 0 auto;
    input {
      cursor: pointer;
      width: 100%;
      font-size: 18px;
      padding: 15px 40px 15px 15px;
      margin-top: 120px;
      border-radius: 15px;
      outline: none;
      border-width: 1px;
      border-color: rgb(56, 66, 69);
      color: rgb(56, 66, 69);
    }
    i {
      cursor: pointer;
      position: absolute;
      right: -30px;
      bottom: 15px;
      font-size: 22px;
    }
  }

  .searchLists {
    width: 50vw;
    margin: 20px auto;
    height: 400px;
    overflow: hidden;
    ol {
      list-style: none;
      width: 54vw;
      padding: 0px;
      margin: 0px;
      max-height: 300px;
      overflow-y: scroll;
      li {
        padding: 10px 50px 10px 20px;
        transition: 0.2s;
        cursor: pointer;
        line-height: 21px;
        display: flex;
        justify-content: space-between;
        &:hover {
          color: white;
        }
        span.name {
          margin-left: 60px;
          margin-right: 40px;
        }
        span {
        }
      }
    }
  }
}
</style>
